<template>
	<view>
		<u-toast ref="uToast" />
		<view class="adver_box">
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="#EA4389" :circular="true" :autoplay="true" >
				<swiper-item v-for="(v,k) in info" :key="k">
					<image  @click="onUrl" :data-url="v.url" data-get="" :src="v.image"></image>
				</swiper-item>
			</swiper>
		</view>
	
		<view class="nav_box">
			<view class="nav" @click="onUrl" data-url="/pages/secret/secret" data-get="">
				<view><image src="../../static/index_icon/secret.png"></image></view>
				<view>恋爱秘籍</view>
			</view>
			<view class="nav" @click="onUrl" data-url="/pages/activity/activity" data-get="">
				<view><image src="../../static/index_icon/activity.png"></image></view>
				<view>热门活动</view>
			</view>
			<view class="nav" @click="onUrl" data-url="/pages/nearby/nearby" data-get="">
				<view><image src="../../static/index_icon/fujin.png"></image></view>
				<view>附近的人</view>
			</view>
			<view class="nav" @click="onUrl" data-url="/pages/coupons/coupons" data-get="">
				<view><image src="../../static/index_icon/coupon.png"></image></view>
				<view>优惠券</view>
			</view>
		</view>
		
		<view class="box">
			<view class="head_box">
				每日推荐
			</view>
			<view v-if="show" class="loading_view" style="padding:80rpx 0;">
			  <u-loading mode="circle" size="50"></u-loading>
			  <view class="messgae">
				加载中...
			  </view>
			 </view>
			<view v-else class="cont_box" v-for="(v,k) in list" :key="k" @click="onUrl" :data-url="'/pages/user/userInfo?id='+v.u_id" :data-get="v.u_id">
				
				<view class='c_top'>
					<view class="img">
						<image :src="v.u_icon"></image>
					</view>
					
					<view class="cont">
						<view class='name'>
							<view class="nickname">
								<text class="hg" v-if="v.u_supremeTime==1">{{v.u_nickname}}</text>
								<text class="hy" v-else-if="v.u_memberTime==1">{{v.u_nickname}}</text>
								<text v-else>{{v.u_nickname}}</text>
								<image src="../../static/image/hg.png" v-if="v.u_supremeTime==1"></image>
								<image src="../../static/image/hy.png" v-else-if="v.u_memberTime==1"></image>
							</view>
							<view class='address'>{{v.info.u_city}}</view>
						</view>
						<view class='info'>
							<image :src="'../../static/index_icon/sex'+v.info.u_sex+'.png'"></image>
							<text>{{v.info.u_age}}岁</text>
							<text> | </text>
							<text>{{education[v.info.u_education]}}</text>
							<text> | </text>
							<text>{{v.info.u_height}}cm</text>
							<text> | </text>
							<text>{{v.info.u_salary}}</text>
						</view>
						<view class='tag'>
							<text>{{v.info.u_star}}</text>
							<text>{{marriage[v.info.u_marriage]}}</text>
						</view>
						<view class='images' v-if="v.u_album.length>0">
							<image v-for="(n,m) in v.u_album" :key="m" :src="n"></image>
						</view>
						<view class="images_empty" v-else>
							{{v.info.u_sex==1?'他':'她'}}没有更多照片了~
						</view>
					</view>
				</view>
				
				<view class='bottom'>
					<image src="../../static/index_icon/requ.png"></image>
					<view>{{v.u_autograph}}</view>
					<view class="clear"></view>
				</view>

			</view>
			
			<view v-if="showError!=''" class='empty'>
				<u-loading mode="circle" v-if='load' size="50"></u-loading>
				<text>{{showError}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				list:[],
				show:true,
				load:false,
				showError:'',
				education:['未选择','高中','中专','大专','本科','硕士','博士'],
				marriage:['','未婚','已婚','重婚'],
				page:1,
				allpage:1
			}
		},
		onLoad() {
			var that=this;
			
			this.$request({
				url:'/index/index',
				success(res){
					if(res.data.code==1){
						var data=res.data.data;
						
						that.info=data.picture;
					}else{
						that.$refs.uToast.show({
							title: res.data.msg,
							type:'error'
						})
					}
				},
				fail(res){
					that.$refs.uToast.show({
						title: '网络繁忙',
						type: 'warning'
					})
				}
			});
			
			this.onList();
		},
		onReachBottom(){
			var page=this.page;
			
			if(page>=this.allpage){
				this.showError='暂无更多用户了~';
			}else{
				page++;
				
				this.load=true;
				
				this.showErrot='加载中...';
			
				this.onList(page);
			}
		},
		onPullDownRefresh() {
			this.list=[];
			this.show=true;
		    
			this.onList(1);
		},
		methods: {
			onUrl(e){
				var url=e.currentTarget.dataset.url;
				
				var get=e.currentTarget.dataset.get;
				
				uni.navigateTo({
				    url:url
				});
			},
			onList(page=1){
				var that=this;
				
				var sex=1;
				
				uni.getStorage({
					key: 'user_sex',
					success: function (res) {
						if(res.data){
							sex=res.data;
						}
					}
				});
				
				this.$request({
					url:'/index/show',
					data:{sex:sex,page:page},
					success(res){
						if(res.data.code==1){
							var data=res.data.data;

							for(var i in data.list){
								that.list.push(data.list[i]);
							}

							that.allpage=data.allpage;

							that.page=data.page;

							that.show=false;

							that.load=false;

							that.showError='';

							if(that.page>=that.allpage){
								that.showError='暂无更多用户了~';
							}

							uni.stopPullDownRefresh();
						}else{
							that.show=false;
							
							that.load=false;
							
							that.showError=res.data.msg;
						}
					},
					fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			}
		}
	}
</script>

<style scoped src='../../static/css/edge.css'>
	
</style>
